
/*
    box 要运动元素
    obj  要修改的属性  {left:0,top:100}

*/
function animate(box, obj) {

    // 每次运动的时候 都清除上一次的定时器
    clearInterval(box.timer)
    // let attr = 'left'
    // let attr = 'top'


    // let obj = { opacity: 0 };//for in
    //for in

    // 500-0 = 500
    box.timer = setInterval(() => {

        // 在得让  对象中的每个 属性  都得 往目标前进 

        // left 0 
        // top  400
        let arr = []

        // 假设已经到了 ,循环遍历，只要有一个没有到 就把 值改为false
        let isFinished = true;

        for (let attr in obj) {

            //attr  left    top  
            // 目标值 
            if (attr === 'opacity') {
                //1  0.33
                let target = obj['opacity']

                //0-1  =-1/8  -0.125
                let speed = (target - parseFloat(getComputedStyle(box)['opacity'])) / 8

                box.style.opacity = parseFloat(getComputedStyle(box)['opacity']) + speed;
                //0   0.00001

                console.log(parseFloat(getComputedStyle(box)[attr]).toFixed(2));

                if (target == parseFloat(getComputedStyle(box)[attr]).toFixed(2)) {
                    //2 次
                    arr.push(true)
                    box.style.opacity = target;

                } else {
                    arr.push(false)
                    isFinished = false;

                }

            } else {
                let target = obj[attr]///obj['left']  obj['top']

                let speedX = (target - parseInt(getComputedStyle(box)[attr])) / 8

                if (speedX > 0) {
                    speedX = Math.ceil(speedX)

                } else {
                    speedX = Math.floor(speedX)

                }
                console.log(speedX);


                box.style[attr] = parseInt(getComputedStyle(box)[attr]) + speedX + 'px'

                if (target === parseFloat(getComputedStyle(box)[attr])) {
                    //2 次
                    arr.push(true)
                } else {
                    arr.push(false)
                    isFinished = false;

                }

            }



        }



        ///循环结束 判断一下 所有的属性是否都到达 目的点  ，都到了才清楚定时器
        // 如果arr中全是 true 说明 ，说明所有的属性都到了终点
        // 只要有一个为false 说明，没有到终点
        console.log(arr);
        // let flag = arr.every(v => v === true);
        // if (flag) {
        //     clearInterval(box.timer)
        // }

        if (isFinished) {
            clearInterval(box.timer)
        }

    }, 80);
}
